<template>
    <div class="main">
      <div class="banner">
        <div class="title">
        <div class="banner-line"></div>
        <div class="rhombus"></div>
        <p>宠爱自己 宠爱至极</p>
        <div class="rhombus"></div>
        <div class="banner-line"></div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: 'main',
        data() {
            return {}
        },
        mounted() {
        },
        methods: {
        }
    }
</script>

<style scoped>
  .banner {
    width: 100%;
    height:auto;
  }
  .banner .title {
    width: 80%;
    height:1.5rem;
    margin:0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .banner .title .banner-line {
    width: 1rem;
    height: 1px;
    background: #333;
  }
  .banner .title p {
    font-size:.3rem;
  }
  .banner .title .rhombus {
    width: .15rem;
    height: .15rem;
    border:1px solid #888888;
    transform: rotate(45deg);
    margin:0 .3rem;
  }
</style>
